

<template>
<div class="cardPackage">
  <navBar :title='title' :titleColor='titleColor' :backVisible='backVisible' :homePath='homePath' :visibleLeft='visibleLeft'></navBar>
  <div class="cardPackageBox">
      <div class="cardPackageBoxTop clearfix">
          <div class="on"><span>全部</span></div>
          <div><span>优惠券</span></div>
          <div><span>体验券</span></div>
          <div><span>服务商品券</span></div>
      </div>
      <div class="cardPackageCenten">
          <div class="cardPackageCentenList">
              <div class="cardPackageCentenLisTop clearfix">
                  <div class="fl cardPackageCentenLisTopLeft">
                    <p class="cardPackageCentenLisTopLeftNUM"><span>30</span>人次</p>
                    <p class="cardPackageCentenLisTopLefTis">限服务商品</p>
                  </div>
                  <div class="fl cardPackageCentenLisTopCenter">
                    <p class="cardPackageCentenLisTopCenterTit">贵宾预约优惠券</p>
                    <p  class="cardPackageCentenLisTopCenterTime">有效期至：2020-05-22</p>
                    <p  class="cardPackageCentenLisTopCenterbtn clearfix">
                      <button class="shareBtn fl">分享</button>
                      <button class="Refund fl">退款</button>
                    </p>
                  </div>
                  <div class="fr cardPackageCentenLisTopRight">
                    <p class="cardPackageCentenLisTopRightBtn"><button class="immediatelyBtn">立即使用</button></p>
                    <p class="cardPackageCentenLisTopRightNum">x6张</p>
                  </div>
              </div>
              <div class="cardPackageCentenListBottom"><span class="gardenLeft"></span><span class="gardenRight"></span>满50人可用。限商品现价使用，限非企业用</div>
          </div>
          <div class="cardPackageCentenList">
              <div class="cardPackageCentenLisTop clearfix">
                  <div class="fl cardPackageCentenLisTopLeft">
                    <p class="cardPackageCentenLisTopLeftNUM"><span>30</span>人次</p>
                    <p class="cardPackageCentenLisTopLefTis">限服务商品</p>
                  </div>
                  <div class="fl cardPackageCentenLisTopCenter">
                    <p class="cardPackageCentenLisTopCenterTit">贵宾预约优惠券</p>
                    <p  class="cardPackageCentenLisTopCenterTime">有效期至：2020-05-22</p>
                    <p  class="cardPackageCentenLisTopCenterbtn clearfix">
                      <button class="shareBtn fl">分享</button>
                      <button class="Refund fl">退款</button>
                    </p>
                  </div>
                  <div class="fr cardPackageCentenLisTopRight">
                    <p class="cardPackageCentenLisTopRightBtn"><button class="immediatelyBtn">立即使用</button></p>
                    <p class="cardPackageCentenLisTopRightNum">x6张</p>
                  </div>
              </div>
              <div class="cardPackageCentenListBottom"><span class="gardenLeft"></span><span class="gardenRight"></span>满50人可用。限商品现价使用，限非企业用</div>
          </div>
           <div class="cardPackageCentenList">
              <div class="cardPackageCentenLisTop clearfix">
                  <div class="fl cardPackageCentenLisTopLeft">
                    <p class="cardPackageCentenLisTopLeftNUM">￥<span>100</span></p>
                    <p class="cardPackageCentenLisTopLefTis">限服务商品</p>
                  </div>
                  <div class="fl cardPackageCentenLisTopCenter">
                    <p class="cardPackageCentenLisTopCenterTit">贵宾预约优惠券</p>
                    <p  class="cardPackageCentenLisTopCenterTime">有效期至：2020-05-22</p>
                    <p  class="cardPackageCentenLisTopCenterbtn clearfix">
                      <button class="shareBtn fl">分享</button>
                      <button class="Refund fl">退款</button>
                    </p>
                  </div>
                  <div class="fr cardPackageCentenLisTopRight">
                    <p class="cardPackageCentenLisTopRightBtn"><button class="immediatelyBtn">立即使用</button></p>
                    <p class="cardPackageCentenLisTopRightNum">x6张</p>
                  </div>
              </div>
              <div class="cardPackageCentenListBottom"><span class="gardenLeft"></span><span class="gardenRight"></span>满50人可用。限商品现价使用，限非企业用</div>
          </div>
          <p class="lookExpiredCoupon">查看已失效的券></p>
      </div>
     <p class="cardDetails" @click="cardPackage">卡券明细</p>
  </div>

  <div class="popupBg" v-show="isShow"></div>
  <div class="cardPackagePopup" v-show="isShow">
    <p class="cardPackagePopupTit"><img @click="!isShow" src="../../../../static/images/gbClose.png">赠送给好友</p>
     <div class="cardPackageCentenList">
          <div class="cardPackageCentenLisTop clearfix">
              <div class="fl cardPackageCentenLisTopLeft">
                <p class="cardPackageCentenLisTopLeftNUM"><span>30</span>人次</p>
                <p class="cardPackageCentenLisTopLefTis">限服务商品</p>
              </div>
              <div class="fl cardPackageCentenLisTopCenter PopupcardPackageCenter">
                <p class="cardPackageCentenLisTopCenterTit">贵宾预约优惠券</p>
                <p  class="cardPackageCentenLisTopCenterTime">有效期至：2020-05-22</p>
              </div> 
              <div class="PopupcardPackageRight fr clearfix">
                <p class="less fl"><img src="../../../../static/images/less.png"> </p>
                <p class="fl PopupcardPackageRightNum">1</p>
                <p class="plus fl"><img src="../../../../static/images/plus.png"></p>
              </div>                 
          </div>
          <div class="cardPackagepopupBgListBottom"><span class="gardenLeft"></span><span class="gardenRight"></span>满50人可用。限商品现价使用，限非企业用</div>
      </div>
      <div class="cardPackagePopupshare clearfix">
          <div class="fl">
              <p><img src="../../../../static/images/pyq.png"></p>
              <p>朋友圈</p>
          </div>
          <div class="fl">
              <p><img src="../../../../static/images/wx.png"></p>
              <p>微信</p>
          </div>
      </div>
  </div>
</div>
</template>

<script>
import navBar from "@/components/navBar/index"
export default {    
  components:{
    navBar
  },   
  data(){
    return{
      title:'卡券包',
      // 标题颜色
      titleColor: {
        default: "#FFFFFF"
      },
      backVisible:true,
      homePath:true,
      visibleLeft:true,
      isShow:false
    }
  },

  methods: {
    //卡卷
    cardPackage(){
       wx.navigateTo({
        url:"/pages/personalCenter/cardDetails/main"
      })
    }
  },

}
</script>

<style scoped>
.cardPackage{
  width: 100%;
}
.cardPackageBoxTop{
  width: 100%;
  display: flex;
  background: #fff;
  height:44px;
  padding:0px 15px;
  flex-direction:row; 
  flex-wrap: nowrap;
  box-sizing: border-box;
  align-items: center;
  justify-content :space-around;
}
.cardPackageBoxTop div{
  width: 25%;
  text-align: center;
  height:44px;
  line-height: 44px;
  font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(128,128,128,1);
}
.cardPackageBoxTop div.on span{
  font-size:16px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:#4D4D4D;
height: 44px;
display: inline-block;
border-bottom: 3px solid rgba(204,170,126,1);
box-sizing: border-box;
}
.cardPackageCenten{
  margin-top: 12px;
  width: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
}
.cardPackageCentenList{
  margin-bottom: 12px;
}
.cardPackageCentenLisTop{
  width: 100%;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow:0px 1px 5px 0px rgba(0,0,0,0.08);
}
.cardPackageCentenListBottom,.cardPackagepopupBgListBottom{
width:100%;
background:rgba(252,252,252,1);
position: relative;
padding: 12px 15px;
box-sizing: border-box;
font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
border-radius: 5px;
box-shadow:0px 1px 5px 0px rgba(0,0,0,0.08);
}
.cardPackageCentenListBottom span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
background:rgba(247,247,247,1);
position: absolute ;
}
.cardPackagepopupBgListBottom span{
   width: 10px;
  height: 10px;
  border-radius: 50%;
background:#fff;
position: absolute ;
}
.gardenLeft{
  top: -5px;
  left: -5px;
  box-shadow:3px 0px 5px 0px rgba(0,0,0,0.08);
}
.gardenRight{
  top: -5px;
  right: -5px;
  box-shadow:-3px 0px 5px 0px rgba(0,0,0,0.08);
}
.cardPackageCentenLisTopLeft{
  margin-right: 26px;
}
.cardPackageCentenLisTopLeftNUM{
  font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.cardPackageCentenLisTopLeftNUM span{
  font-size:28px;
font-family:DINPro-Medium,DINPro;
font-weight:500;
color:rgba(51,51,51,1);
}
.cardPackageCentenLisTopLefTis{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
}
.cardPackageCentenLisTopCenterTit{
  font-size:14px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
}
.cardPackageCentenLisTopCenterTime{
  font-size:12px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(179,179,179,1);
  margin: 5px 0px;
}
.cardPackageCentenLisTopCenterbtn button{
width:46px;
height:20px;
border-radius:30px;
border:1px solid rgba(204,170,126,1);
}
.shareBtn{
  width:46px;
height:20px;
border-radius:11px;
border:1px solid rgba(204,170,126,1);
font-size:11px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(204,170,126,1);
background: #fff;
padding: 0px;
line-height: 20px;
}
.Refund{
  width:46px;
height:20px;
border-radius:11px;
border:1px solid rgba(230,108,29,1);
font-size:11px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
background: #fff;
color:#E66C1D;
margin-left: 6px;
padding: 0px;
line-height: 20px;
}
.cardPackageCentenLisTopRight{
  margin-top: 20px;
}
.immediatelyBtn{
  width:68px;
height:20px;
background:rgba(204,170,126,1);
border-radius:3px;
font-size:11px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height: 20px;
}
.cardPackageCentenLisTopRightNum{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
margin-top: 6px;
text-align: center;
}

.lookExpiredCoupon{
  width: 100%;
  text-align: center;
  font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(204,170,126,1);
padding: 40px 0px 40px;
}
.cardDetails{
  width:285px;
height:40px;
background:rgba(255,255,255,1);
box-shadow:0px 3px 12px 0px rgba(39,45,51,0.12);
border-radius:23px;
text-align: center;
margin: 0px auto 40px;
font-size:16px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
line-height: 40px;
}
.popupBg{
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0px;
  left: 0px;
  background: rgba(51, 51, 51, 0.3);
  }
  .cardPackagePopup{
 position: fixed;
  bottom:0px;
  left: 0px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 15px 24px;
  }
  .cardPackagePopupTit{
    text-align: center;
    font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
margin-bottom: 24px;
  }
  .cardPackagePopupTit img{
    float: left;
    width: 24px;
    height:24px;
  }
  .PopupcardPackageCenter,.PopupcardPackageRight{
    margin-top: 15px;
  }
  .less,.plus{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 14px;
    text-align: center;
    box-shadow:0px 1px 5px 0px rgba(0,0,0,0.08);
    border:1px solid rgba(235,235,235,1);
    padding: 4px;
    box-sizing: border-box;
  }
  .less img,.plus img{
     width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
  }
  .PopupcardPackageRightNum{
    margin: 0px 10px;
    font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
line-height:20px;
  }
.cardPackagePopupshare{
  width: 100%;
  margin-top: 30px;
}
.cardPackagePopupshare div{
  width: 50%;
  text-align: center;
}
.cardPackagePopupshare div p{
  text-align: center;
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
margin-bottom: 5px;
}
.cardPackagePopupshare div p img{
  width: 45px;
  height: 45px;
  display: block;
  margin: 0px auto;
}
</style>
